一、配置环境
首先为大家介绍两种方法，在angular中搭建使用可视化工具Echarts的环境：
- 快速简单，但是依赖网络(自己试用或学习Echarts时，可用这种方法)
- 需下载但是使用稳定（一般在项目中使用这种办法）
使用在线依赖-方法1 ：
在angular项目中的src文件夹中，找到index.html文件，在<head></head>中加入在线依赖包
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/3.7.2/echarts.js"></script>使用本地依赖-方法2：
- 首先使用npm来安装echarts（在项目文件夹中打开cmd，输入以下命令）
npm install --save-dev echarts然后查看package.json中的dependencies里是否已经有echarts了
- angular项目文件夹src/assets文件夹内新建一个js文件夹，将bower_components/echarts/dist中的echarts.min.js拷贝到新建的js文件夹内
- 在angular项目中的src文件夹中，找到index.html文件，在<head></head>中加入本地依赖包
<script src="../assets/js/echarts.min.js"></script>二、简单使用echarts
一般我们使用echarts时会单独建立一个文件，避免与组件的component.ts的逻辑搞混。
那么我们在使用echarts的组件文件夹中，新建一个echart_1.ts，将可视化展示相关的内容与ts逻辑内容分离。
- 在html中加入div
<div id="chart111" style="width: 30rem;height:20rem;"></div>- 在echarts.ts中写一个折线图，名为GRAPH1
declare const echarts: any;
export const GRAPH1 = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line',
smooth: true
}]};- 在ts中使折线图与dom元素相关联（只看注释行就行）
import {Component,OnInit} from '@angular/core';
import { GRAPH1 } from './echart'; //从echart.ts中引入折线图GRAPH1
declare const echarts: any;
@Component({
selector: 'app-contain-exchart',
templateUrl: './contain-exchart.component.html',
styleUrls: ['./contain-exchart.component.css']
})
export class ContainExchartComponent implements OnInit {
public myChart1;
public graph1;
constructor() {}
ngOnInit() {
//把折线图关联到html的元素
echarts.init(document.getElementById('chart111')).setOption(GRAPH1);
}
}至此exchar的折线图t就会在页面上显示了
接下来，就可以在exchart的中文网站上，继续尝试更丰富的内容了
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。